<template>
  <div class="home">
    <h2>home</h2>
    <el-form-item label="默认字体大小：">
      <el-radio-group v-model="defaultFont" @change="fontChange">
        <el-radio :value="20">large</el-radio>
        <el-radio :value="16">middle</el-radio>
        <el-radio :value="14">small</el-radio>
      </el-radio-group>
    </el-form-item>

    <div class="font-ul">
      <div>左侧边栏</div>
      <div>中间区</div>
      <div>右侧边栏</div>
    </div>

    <el-form-item label="菜单栏颜色：">
      <el-color-picker
        v-model="color"
        show-alpha
        :predefine="predefineColors"
        @change="colorChange"
      />
    </el-form-item>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
// 改变root属性变量
const changeRoot = (rootStyle: string, value: string | number) => {
  document.documentElement.setAttribute("style", `${rootStyle}: ${value}`);
};
// 切换font
const defaultFont = ref(16);
const fontChange = (val: number) => {
  // document.body.setAttribute("style", `--xw-default-font: ${val}px`);
  changeRoot("--el-font-size-base", val + "px");
};
// 切换主题颜色
const color = ref("#545c64");
const predefineColors = [
  "#ff4500",
  "#ff8c00",
  "#ffd700",
  "#90ee90",
  "#00ced1",
  "#1e90ff",
  "#c71585",
  "rgba(255, 69, 0, 0.68)",
  "rgb(255, 120, 0)",
  "hsv(51, 100, 98)",
  "hsva(120, 40, 94, 0.5)",
  "hsl(181, 100%, 37%)",
  "hsla(209, 100%, 56%, 0.73)",
  "#c7158577",
];
const colorChange = (val: string) => {
  // document.body.setAttribute("style", `--xw-default-font: ${val}px`);
  changeRoot("--el-menu-bg-color", `${val} !important`);
};
</script>

<style lang="scss" scoped>
.font-ul {
  display: flex;
  flex-flow: row nowrap;
  margin-bottom: 30px;
  & > div {
    padding: 10px;
  }
  & div:nth-child(1) {
    width: 200px;
    height: 100%;
    background-color: cornflowerblue;
    font-size: var(--el-font-size-base);
  }
  & div:nth-child(2) {
    flex: 1 1 0%;
    height: 100%;
    background-color: yellowgreen;
    font-size: var(--el-font-size-base);
  }
  & div:nth-child(3) {
    width: 200px;
    height: 100%;
    background-color: pink;
    font-size: var(--el-font-size-base);
  }
}
</style>
